<template>
    <div style="margin: auto;width: 70%;min-height: 650px">
        <div style="margin: 10px 0 10px 0">
            <h1>{{formData.title}}</h1>
        </div>
        <Divider />
        <div v-html="formData.content"></div>
        <Divider />
        <Input v-model="reply.content" type="textarea" :autosize="{minRows: 3,maxRows: 5}"  :show-word-limit="true" :maxlength="300" placeholder="输入回复内容" />
        <div style="text-align: right;margin: 5px">
            <Button shape="circle"  type="primary" @click="handleSubmit">回复</Button>
        </div>
        <Divider />
        <template v-for="(item,i) in postReplays">
            <div  :key="item.id">
                <Avatar style="background-color: #87d068 ;margin-right: 5px" icon="ios-person" :size="28"/>
                <span style="font-size: 16px;font-weight: bold ">{{item.posterUserName}} </span>
                <span style="margin-left: 15px">{{item.createTime}} </span>
                <span style="margin-left: 15px">{{postReplays.length-i}}楼 </span>
                <div  style="margin: 8px 0 0 5px">
                    {{item.content}}
                </div>
                <Divider />
            </div>

        </template>

        <Spin size="large" fix v-if="spinShow"></Spin>
    </div>
</template>

<script>
    import Base from '@/components/table/BaseEdit.vue';
    import user from '@/common/user';
    export default {
        extends:Base,
        data () {
            let posterId=user.getUser().id;
            return {

                reply:{
                    content:"",
                    postId:"",
                    posterId
                },
                postReplays:[]
            }
        },
        mounted(){
            this.initData();
        },
        methods: {
            handleSubmit () {
                //保存
                console.log(this.reply.content)
                if(this.reply.content == null || this.reply.content==""){
                    this.$Message.info("请输入回复内容！");
                    return ;
                }
                this.$axiosUtils.post("/api/post/reply/save",this.reply).then(()=>{
                    this.reply.content="";
                    this.initData();
                }).catch(function (error) {
                    this.$Message.error(error);
                })
            },
            initData(){
                let id=this.$route.query.id;
                if(id != null && id != ""){
                    this.reply.postId=id;
                    this.$axiosUtils.post("/api/post/readPostAndReply",{id}).then((res)=>{
                        this.formData=res.post;
                        this.postReplays=res.postReplays
                        //this.spinShow=false;
                    }).catch(function (error) {
                        this.$Message.error(error);
                    })
                }else{
                    this.$Message.error("页面出错！");
                }
            }
        }
    }
</script>

<style scoped>
    .w-e-menu{
        z-index: 500 !important;
    }
    .w-e-text-container{
        z-index: 600 !important;
    }
</style>
